<template>
  <div class="basic-container">
    <el-card>
      <el-form ref="search" class="user-form">
        <span class="explain">说明：目前支持学科和关键字条件筛选</span>
        <el-form-item class="adduser">
          <el-button size="mini" type="success" @click="$router.push({ path: '/questions/new' })">
            <i class="el-icon-edit"/>
            新增试题
          </el-button>
        </el-form-item>
      </el-form>
      <searchVue
        :creator-list="creatorList"
        @searchQuestionsFn="searchQuestionsFn"
        @clearForm="getBasicQuestions()"
      />
      <div class="tips">
        <i class="el-icon-info"/>
        <span>数据一共 {{ total }} 条</span>
      </div>
      <el-table align="center" :data="basicQuestionsList">
        <el-table-column label="试题编号" prop="number"/>
        <el-table-column label="学科" prop="subject"/>
        <el-table-column label="目录" prop="catalog"/>
        <el-table-column label="题型" prop="questionType" :formatter="qyestionsTypeFn"/>
        <el-table-column label="题干" prop="question">
          <template #default="{ row }">
            <span v-html="row.question"/>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" prop="addDate"/>
        <el-table-column label="难度" prop="difficulty" :formatter="difficultyFn"/>
        <el-table-column label="录入人" prop="creator"/>
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <el-button
              circle
              icon="el-icon-view"
              plain
              type="primary"
              size="mini"
              @click="preview(row.id)"
            />
            <el-button
              circle
              icon="el-icon-edit"
              plain
              type="success"
              size="mini"
              @click="
                $router.push({ path: '/questions/new', query: { id: row.id } })
              "
            />
            <el-button
              circle
              icon="el-icon-delete"
              plain
              type="danger"
              size="mini"
              @click="remove(row.id)"
            />
            <el-button
              circle
              icon="el-icon-check"
              plain
              type="warning"
              size="mini"
              @click="add(row.id, 1)"
            />
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page="page"
        :page-sizes="[5, 10, 15, 20, 25]"
        :page-size="pagesize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="currentChange"
      />
    </el-card>
    <previewVue :id="id" :show-dialog.sync="showDialog"/>
  </div>
</template>

<script>
import searchVue from './components/search.vue'
import previewVue from './components/previewDialog.vue'
import { delBasicQuestionsApi, getBasicQuestionsApi } from '@/api/questions'
import { publishQuestionApi } from '@/api/questionBank'
import { questionType, difficulty } from '@/api/constants/constants'
export default {
  components: {
    searchVue,
    previewVue
  },
  data() {
    return {
      loading: false,
      total: 0,
      page: 1,
      pagesize: 5,
      basicQuestionsList: [], // 题列表
      questionType: '', // 题型
      difficulty: '', // 难度
      creatorList: [], // 录入人列表
      showDialog: false, // 控制弹层
      id: 0 // 改行数据的id
    }
  },
  created() {
    this.getBasicQuestions()
  },
  methods: {
    // 获取基础题库列表
    async getBasicQuestions() {
      console.log(this.page, this.pagesize)
      const data = await getBasicQuestionsApi({
        page: this.page,
        pagesize: this.pagesize
      })
      console.log(data)
      this.basicQuestionsList = data.items
      this.total = data.counts
      this.creatorList = data.items.map(item => {
        return item.creator
      })
      console.log(this.creatorList)
    },
    handleSizeChange(val) {
      // 更新每页条数
      this.pagesize = val
      // 更新每条条数，页码重置为第一页
      this.page = 1
      // 重新获取新的页码的数据
      this.getBasicQuestions()
    },
    // currentPage改变时触发
    // 目标：页码切换渲染新一页数据
    currentChange(val) {
      // 更新当前页
      //   console.log(val)
      this.page = val
      // 重新获取新的页码的数据
      this.getBasicQuestions()
    },
    qyestionsTypeFn(row, column, cellValue, index) {
      const Type = questionType.find(item => item.value === +cellValue)
      return Type ? Type.label : ''
    },
    difficultyFn(row, column, cellValue, index) {
      const Type = difficulty.find(item => item.value === +cellValue)
      return Type ? Type.label : ''
    },
    // 预览
    preview(id) {
      this.showDialog = true
      this.id = id
    },
    // 删除
    remove(id) {
      this.$confirm('确认删除该题目?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await delBasicQuestionsApi(id)
          this.getBasicQuestions()
          this.$message.success('删除题目成功')
        })
        .catch(() => {})
    },
    // 添加到精选题库
    add(id, choiceState) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await publishQuestionApi(id, choiceState)
          this.getBasicQuestions()
          this.$message.success('加入成功')
        })
        .catch(() => {})
    },
    // 搜索
    async searchQuestionsFn(data) {
      //   this.subjectID = data.subjectID
      //   this.keyword = data.keyword
      //   console.log(this.subjectID, this.keyword)
      console.log(data)
      const res = await getBasicQuestionsApi({
        page: this.page,
        pagesize: this.pagesize,
        ...data
      })
      //     page: this.page,
      //     pagesize: this.pagesize,
      //     subjectId: this.subjectID
      console.log(res)
      this.basicQuestionsList = res.items
      this.total = res.counts
      this.creatorList = res.items.map((item) => {
        return item.creator
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.basic-container {
  padding: 20px;
  .user-form {
    display: flex;
    justify-content: space-between;
    .explain {
      font-size: 12px;
      color: rgb(255, 166, 166);
    }
  }
  .tips {
    padding: 10px 15px;
    margin-bottom: 10px;
    font-size: 12px;
    background: #ececec;
    color: #999;
    .el-icon-info {
      margin-right: 10px;
      color: #666;
    }
  }
}
</style>
